<template>
  <div class="main-content">
    <div id="chart-box">
    <div style="margin-left: 10px" ref="chart1" id="chart1"></div>
    <div ref="chart2" id="chart2"></div>
    <div ref="chart3" id="chart3"></div>
    <div ref="chart4" id="chart4"></div>

    </div>
  </div>
</template>

<script>
import dibuBAH from "@/components/dibuBAH.vue";
import Search from "@/components/Search.vue";
import * as echarts from 'echarts';


export default {

  data() {
    return {
      current: '全部博客',
      categoryList: [],
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      topList: [],
      showList: [],
      lastIndex: 0,
      topActivityList: [],
      showActivityList: [],
      activityLastIndex: 0,
    }
  },
  mounted() {
    this.load();

    let chart1 = echarts.init(this.$refs.chart1);
    let chart2 = echarts.init(this.$refs.chart2);
    let chart3 = echarts.init(this.$refs.chart3);
    let chart4 = echarts.init(this.$refs.chart4);

    let chart2Option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '0%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 10,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '江苏' },
            { value: 735, name: '上海' },
            { value: 580, name: '四川' },
            { value: 484, name: '湖北' },
            { value: 300, name: '江西' }
          ]
        }
      ]
    };
    let chart1Option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ['人均活跃度', '情绪占比度', '总体占比'],
        left: '0%'
      },
      xAxis: [
        {
          type: 'category',
          data: ['0-15', '15-30', '30-45', '45-60', '60-75', '75-90', '90-'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: 'b',
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: 'c',
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: '{value} '
          }
        }
      ],
      series: [
        {
          name: 'a',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' ml';
            }
          },
          data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
          ]
        },
        {
          name: 'b',
          type: 'bar',
          tooltip: {
            valueFormatter: function (value) {
              return value + ' ml';
            }
          },
          data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
          ]
        },
        {
          name: 'c',
          type: 'line',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' °C';
            }
          },
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
      ]
    };
    let chart3Option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        left: 'center',
        data: [
          'A Software',
          'A Phone',
          'Another Phone',
          'Precipitation',
          'Evaporation'
        ]
      },
      radar: [
        {
          indicator: [
            { text: 'Brand', max: 100 },
            { text: 'Content', max: 100 },
            { text: 'Usability', max: 100 },
            { text: 'Function', max: 100 }
          ],
          center: ['25%', '40%'],
          radius: 80
        },
        {
          indicator: [
            { text: 'Look', max: 100 },
            { text: 'Photo', max: 100 },
            { text: 'System', max: 100 },
            { text: 'Performance', max: 100 },
            { text: 'Screen', max: 100 }
          ],
          radius: 80,
          center: ['50%', '60%']
        },
        {
          indicator: (function () {
            var res = [];
            for (var i = 1; i <= 12; i++) {
              res.push({ text: i + 'par', max: 100 });
            }
            return res;
          })(),
          center: ['75%', '40%'],
          radius: 80
        }
      ],
      series: [
        {
          type: 'radar',
          tooltip: {
            trigger: 'item'
          },
          areaStyle: {},
          data: [
            {
              value: [60, 73, 85, 40],
              name: 'A Software'
            }
          ]
        },
        {
          type: 'radar',
          radarIndex: 1,
          areaStyle: {},
          data: [
            {
              value: [85, 90, 90, 95, 95],
              name: 'A Phone'
            },
            {
              value: [95, 80, 95, 90, 93],
              name: 'Another Phone'
            }
          ]
        },
        {
          type: 'radar',
          radarIndex: 2,
          areaStyle: {},
          data: [
            {
              name: 'Precipitation',
              value: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
              ]
            },
            {
              name: 'Evaporation',
              value: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
              ]
            }
          ]
        }
      ]
    };
    let chart4Option = {
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Line 1',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'rgb(1, 191, 236)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [140, 232, 101, 264, 90, 340, 250]
        },
        {
          name: 'Line 2',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(0, 221, 255)'
              },
              {
                offset: 1,
                color: 'rgb(77, 119, 255)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [120, 282, 111, 234, 220, 340, 310]
        },
        {
          name: 'Line 3',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(55, 162, 255)'
              },
              {
                offset: 1,
                color: 'rgb(116, 21, 219)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [320, 132, 201, 334, 190, 130, 220]
        },
        {
          name: 'Line 4',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 0, 135)'
              },
              {
                offset: 1,
                color: 'rgb(135, 0, 157)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [220, 402, 231, 134, 190, 230, 120]
        },
        {
          name: 'Line 5',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 191, 0)'
              },
              {
                offset: 1,
                color: 'rgb(224, 62, 76)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: [220, 302, 181, 234, 210, 290, 150]
        }
      ]
    };



    chart1.setOption(chart1Option);
    chart2.setOption(chart2Option);
    chart3.setOption(chart3Option);
    chart4.setOption(chart4Option);

  },
  components: {
    dibuBAH
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    refreshActivityTop(){
      this.$request.get('/activity/selectTop').then(res => {
        //后台分页传数据
        this.topActivityList = res.data || []
        // 为对应的榜单添加一个index表示其热榜排名
        let i = 1
        this.topActivityList.forEach(item => item.index = i++)
        //showList是展示的数据list
        if(this.activityLastIndex >= this.topActivityList.length || this.activityLastIndex >=20){
          this.activityLastIndex = 0
        }
        this.showActivityList = this.topActivityList.slice(this.activityLastIndex,this.activityLastIndex+5)  //0-5  5-10
        this.activityLastIndex += 5
      })
    },
    refreshTop(){
      this.$request.get('/blog/selectTop').then(res => {
        //后台分页传数据
        this.topList = res.data || []
        // 为对应的榜单添加一个index表示其热榜排名
        let i = 1
        this.topList.forEach(item => item.index = i++)
        //showList是展示的数据list
        if(this.lastIndex >= this.topList.length || this.lastIndex >= 20){
          this.lastIndex = 0
        }
        this.showList = this.topList.slice(this.lastIndex,this.lastIndex+5)  //0-5  5-10
        this.lastIndex += 5
      })
    },
    selectCategory(categoryName){
      this.current = categoryName  //点击博客分类给该量赋值
      this.loadBlogs(1)  //切换重新刷新
    },
    load() {
      this.$request.get('/category/selectAll').then(res => {
        this.categoryList = res.data || []
        this.categoryList.unshift({name: '全部博客'})
      })
    //   请求博客数据

    },
    loadBlogs(pageNum) {
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/blog/selectPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          categoryName: this.current === '全部博客' ? null : this.current,  //根据当前选中的博客进行查询
          // title: this.title,
        }
      }).then(res => {
        this.tableData = res.data?.list
        this.total = res.data?.total
      })
    }
  }
}
</script>
<style>
#chart-box {
  position: relative;
  height: 900px;
  width: 500px;
}
#chart1 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 300px;
  height: 400px;
}
#chart2 {
  position: absolute;
  left: 0px;
  top: 400px;
  width: 300px;
  height: 300px;
}
#chart3 {
  position: absolute;
  left: 300px;
  top: 0px;
  width: 800px;
  height: 400px;
}
#chart4 {
  position: absolute;
  left: 300px;
  top: 400px;
  width: 800px;
  height: 300px;
}

.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-active {
  background-color: #e56c3c;
  color: white;
  border-radius: 10px;
}
.line1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-box {
  display: flex;
  grid-gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.blog-box:first-child {
  padding-bottom: 0;
}
.blog-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  cursor: pointer;
}
.blog-title:hover {
  color: #2656b5;
}
a {
  color: #333
}
</style>
